<template>
    <div id="zxLeixing">
        <div class="heightChart">
            <div class="title">话务分类</div>
            <div id="midBottom"></div>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import {orderTypeCount} from "../../../network/home";
    export default {
        name: "zxLeixing",
        data() {
            return {
                timer:null
            }
        },
        mounted() {
            this.setEchart();
            this.timer = setInterval(() => {
                this.setEchart();
            },30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('右上关闭')
            }
        },
        methods: {
            setEchart() {
                orderTypeCount().then(res => {
                    if(res.code=='200'){
                        // console.log(res.data)
                        let myChart = echarts.init(document.getElementById("midBottom"));
                        myChart.setOption({
                            legend: {
                                x: 'center',
                                y: 'top',
                                selectedMode: true,
                                textStyle: {
                                    color: "#00f5ff",
                                    fontSize: 12
                                },
                                data: res.data.name
                            },
                            calculable: true,

                            tooltip : {
                                trigger: 'item',
                                formatter: "{b} : {d}%"
                            },
                            series: [
                                {
                                    // name: '面积模式',
                                    type: 'pie',
                                    radius: [30, 110],
                                    center: ['50%', '50%'],
                                    roseType: 'area',
                                    labelLine: {
                                        lineStyle: {
                                            color: "#00f5ff"
                                        }
                                    },
                                    label: {
                                        color: "#00f5ff",
                                        trigger: 'item',
                                        formatter: "{b} : {d}%"
                                    },
                                    data:res.data.list
                                }
                            ]
                        });
                    }
                });

            }

        }
    }
</script>

<style scoped>
    .heightChart {
        width: 610px;
        height: 410px;
        background: url("../../../assets/img/worktake/top.png");
        background-size: 610px 410px;
        position: relative;
    }

    .title {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 22px;
        color: #FEF17A;
    }

    #midBottom {
        width: 610px;
        height: 410px;
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
